<template>
  <div :style="{ padding: '0 50px 32px 0' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding" :onClick="handleClick">
      <v-tooltip/>
      <v-legend/>
      <v-axis/>
      <v-bar position="type*诉求件数"/>
     <!--  <v-line position="type*诉求量" color="#2fc25b" :size="3"/> -->
    </v-chart>
  </div>
</template>

<script>
  import { ChartEventMixins } from './mixins/ChartMixins'

  export default {
    name: 'BarAndLine',
    mixins: [ChartEventMixins],
    props: {
      title: {
        type: String,
        default: ''
      },
      dataSource: {
        type: Array,
        default: () => [
          { type: '2020-02', 诉求件数: 200, 诉求量: 100 },
          { type: '2020-03', 诉求件数: 300, 诉求量: 80 },
          { type: '2020-04', 诉求件数: 200, 诉求量: 50 },
          { type: '2020-05', 诉求件数: 400, 诉求量: 180 },
          { type: '2020-06', 诉求件数: 200, 诉求量: 40 },
          { type: '2020-07', 诉求件数: 700, 诉求量: 400 },
          { type: '2020-08', 诉求件数: 200, 诉求量: 30 },
          { type: '2020-09', 诉求件数: 600, 诉求量: 360 },
          { type: '2020-10', 诉求件数: 200, 诉求量: 20 },
          { type: '2020-11', 诉求件数: 900, 诉求量: 580 },
          { type: '2020-12', 诉求件数: 200, 诉求量: 13 },
          { type: '2021-01', 诉求件数: 100, 诉求量: 8 },
        ]
      },
      height: {
        type: Number,
        default: 400
      }
    },
    data() {
      return {
        padding: { top:50, right:50, bottom:100, left:50 },
        scale: [{
          dataKey: '交易量',
          min: 0
        }, {
          dataKey: '诉求量',
          min: 0
        }]
      }
    },
    computed: {
      data() {
        return this.dataSource
      }
    }
  }
</script>